<template>
  <div class="monthlyMeeting-container page-common-layout">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-month-picker
            v-model="condition.monthData"
            placeholder="请选择月份"
            format="YYYY-MM"
            valueFormat="YYYY-MM"
          />
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="meeting-body-container">
      <div class="operate"></div>
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="monthData" title="例会月份"> </vxe-column>
          <vxe-column field="completeCount" title="已填报项目数(个)">
          </vxe-column>
          <vxe-column field="laggingCount" title="滞后项目数(个)"> </vxe-column>
          <vxe-column title="上月交办事项" fixed="right" align="left">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-tooltip>
                  <template slot="title">
                    查看
                  </template>
                  <a-icon type="file-search" @click="handleLastModal(row, 1)" />
                </a-tooltip>
                <a-tooltip v-if="row.taskInputBtn" v-action:xmtb_add>
                  <template slot="title">
                    上月交办事项
                  </template>
                  <icon-font
                    type="icon-weituo"
                    color="#239B53"
                    class="icon-color-1"
                    @click="handleLastModal(row, 2)"
                  />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
          <vxe-column title="本月工程进展 " fixed="right" align="left">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-tooltip>
                  <template slot="title">
                    查看
                  </template>
                  <a-icon
                    type="file-search"
                    @click="handleCurrentModal(row, 1)"
                  />
                </a-tooltip>
                <a-tooltip v-action:xmtb_add v-if="row.taskInputBtn">
                  <template slot="title">
                    本月工程进展
                  </template>
                  <icon-font
                    type="icon-daojishi"
                    class="icon-color-2"
                    @click="handleCurrentModal(row, 2)"
                  />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>

    <!-- 上月交办事项 -->
    <lastMonthPage
      :key="lastMonthPage.key"
      :visible.sync="lastMonthPage.visible"
      :parameter="lastMonthPage.soucre"
      :operateType="lastMonthPage.operateType"
    ></lastMonthPage>
    <!-- 本月工程进展 -->
    <currentMonthPage
      :key="currentMonthPage.key"
      :visible.sync="currentMonthPage.visible"
      :parameter="currentMonthPage.soucre"
      :operateType="currentMonthPage.operateType"
    ></currentMonthPage>
  </div>
</template>

<script>
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
//上月交办事项
import lastMonthPage from "./components/lastMonthPage.vue";
//本月工程进展
import currentMonthPage from "./components/currentMonthPage.vue";
import { pageMonthlyMeeting } from "@/api/safetyManage";
export default {
  components: {
    IconFont,
    ScreenConditions,
    lastMonthPage,
    currentMonthPage,
  },
  data() {
    return {
      condition: {
        monthData: "",
      },
      //列表
      loading: false,
      tableData: [{}],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      //上月交办事项
      lastMonthPage: {
        key: "last_0",
        visible: false,
        soucre: {},
        operateType: "",
      },
      //本月工程进展
      currentMonthPage: {
        key: "current_0",
        visible: false,
        soucre: {},
        operateType: "",
      },
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    // 上月交办事项
    handleLastModal(row, type) {
      this.lastMonthPage.key = Date.now();
      this.lastMonthPage.soucre = row;
      this.lastMonthPage.operateType = type;
      this.lastMonthPage.visible = true;
    },
    //本月工程进展
    handleCurrentModal(row, type) {
      this.currentMonthPage.key = Date.now();
      this.currentMonthPage.soucre = row;
      this.currentMonthPage.operateType = type;
      this.currentMonthPage.visible = true;
    },

    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    reset() {
      this.condition.monthData = "";
      this.search();
    },
    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { monthData } = this.condition;
      pageMonthlyMeeting({
        page,
        pageSize,
        monthData,
      })
        .then((res) => {
          this.tableData = res?.data.rows || [];
          this.pager.total = res?.data.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.monthlyMeeting-container {
  display: flex;
  flex-direction: column;
  .meeting-body-container {
    flex: 1;
    background-color: @base-bg-color;
    flex-shrink: 0;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .main {
      flex: 1;
      .text-button-group {
        .icon-color-1 {
          color: #239b53;
        }
        .icon-color-2 {
          color: #f07f17;
        }
      }
    }
    .pager-container {
      flex-shrink: 0;
      box-sizing: border-box;
    }
  }
}
</style>
